<template>  
    <el-page-header>  
        <template #breadcrumb>  
            <el-breadcrumb separator="/">  
                <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index"   
                    :to="{ path: item.path }">  
                    {{ item.name }}  
                </el-breadcrumb-item>  
            </el-breadcrumb>  
        </template>  
        <template #content>  
            <span class="text-large font-600 mr-3"> Title </span>  
        </template>  
    </el-page-header>  
</template>

<script>  
import { computed } from 'vue';  
import { useRoute } from 'vue-router';  

export default {  
    setup() {  
        const route = useRoute();  

        const breadcrumbItems = computed(() => {  
            const pathParts = route.path.split('/').filter(part => part);  
            return pathParts.map((part, index) => ({  
                name: part.charAt(0).toUpperCase() + part.slice(1), // Capitalize first letter  
                path: '/' + pathParts.slice(0, index + 1).join('/') // Constructing paths incrementally  
            }));  
        });  

        return {  
            breadcrumbItems,  
        };  
    },  
};  
</script>

<style scoped>
.breadcrumb-item {
    background-color: #f5f7fa;
    /* Background color */
    border-radius: 4px;
    /* Rounded corners */
    padding: 5px 10px;
    /* Padding */
    margin-right: 10px;
    /* Spacing between items */
    color: #333;
    /* Font color */
    cursor: pointer;
    /* Pointer on hover */
    transition: background-color 0.3s;
    /* Transition effect */
}

.breadcrumb-item:hover {
    background-color: #e5e8f0;
    /* Background color on hover */
}
</style>